<template>
  <div class="myContainer">
    <el-tabs type="border-card">
      <el-tab-pane label="计划基础信息">
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划名称 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划名称" :disabled="disabled"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划状态 :
          </el-col>
          <el-col :span="4" class="myLineHeight_45px">
            <template>
              <el-radio-group v-model="on" :disabled="disabled">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </template>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划ID :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划ID" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划所属小区 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划所属小区" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划模板及巡检对象 :
          </el-col>
          <el-col :span="15">
            <template>
              <el-table
                :data="tableDataList"
                border
                style="width: 100%">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="巡检计划模板">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="巡检对象">
                </el-table-column>
              </el-table>
            </template>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划周期 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划周期" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划负责人 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划负责人" :disabled="disabled" @focus="newPersonnelDialogVisible=true"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            联系电话 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="联系电话" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            计划执行人 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="计划检查人" :disabled="disabled" @focus="newPersonnelDialogVisible=true"></el-input>
          </el-col>
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            联系电话 :
          </el-col>
          <el-col :span="8">
            <el-input placeholder="联系电话" :disabled="disabled"></el-input>
          </el-col>
        </el-row>
        <el-row class="myPaddingBottom_10px">
          <el-col :span="15" :offset="3">
            <el-button type="primary" class="myBgGreen">保存</el-button>
            <el-button type="primary" class="myBgGreen">关闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="计划执行项目">
        <el-row class="myPaddingTop_10px">
          <el-col>
            <el-form :inline="true" >
              <el-form-item>
                <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="myBgGreen">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <template>
              <el-table
                :data="tableDataList"
                border
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="100">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="巡检计划名称">
                </el-table-column>
              </el-table>
            </template>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="计划内任务">
        <el-row class="myPaddingTop_10px">
          <el-col>
            <el-form :inline="true" >
              <el-form-item>
                <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="myBgGreen">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <template>
              <el-table
                :data="tableDataList"
                border
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="任务名称">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="任务状态">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="任务开始时间">
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="任务截至时间">
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template scope="scope">
                    <el-button class="look" type="text" size="small">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-col>
        </el-row>
        <!-- 分页控件 start -->
        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 分页控件 end -->
        <el-row>
          <el-col :span="24">
            <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    



    <!--选择人员弹出框 start-->
    <el-dialog title="选择人员" class="myRoleDialog" :visible.sync="newPersonnelDialogVisible" >
      <el-form :inline="true" >
        <el-form-item>
          <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="myBgGreen">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-menu class="mymarginTop_10px"><!-- :default-openeds="['1','1-1']"-->
        <el-menu-item index="1">张三</el-menu-item>
        <el-menu-item index="2">李四</el-menu-item>
        <el-menu-item index="3">王五</el-menu-item>
      </el-menu>
      <div slot="footer">
        <el-button type="primary" class="myBgGreen" @click="newPersonnelDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="newPersonnelDialogVisible = false">提 交</el-button>
      </div>
    </el-dialog>
    <!--选择人员弹出框 end-->
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }
</style>
<script>

  export default {
    data(){
      return{
        on:"",
        newPersonnelDialogVisible:false,
        searchKW:"",
        startDateValue:"",
        endDateValue:"",
        lastStartDateValue:"",
        lastEndDateValue:"",
        tableDataList:[],
        page_num:1,
        page_size:10,
        total:null,
        disabled:true
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '日常巡检管理';
      
    },
    methods:{     
      onClose:function(){
        this.$router.push({
          path:'/xjjhgl',
          query: {}
        })
      },
      handleSelectionChange:function(val){

      },
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
      }
    }
  }
</script>



